<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令 v-text</title>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <div id="root">
        
        <h2 :style="{opacity}">Arlei</h2><br>
        <button @click="stop">点击停止</button>

    </div>

    <script>
        Vue.config.productionTip = false;


        new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {
                stop(){
                    this.$destroy()
                }
            },
            // 无法通过vm获取data中的数据和method方法
            beforeCreate () {
                
            },
            // 初始化 数据检测和数据代理
             
            // 可以通过vm获取data中的数据和method方法
            created (){

            },
            // 页面呈现的是未经 Vue编译 的dom， 此时对dom的多有操作均无效
            beforeMount() {
                
            },
            // Vue 完成模版解析并吧初始的真实DOM元素放入页面后(挂载完毕)调用mounted
            mounted() {
                console.log(this)
                this.timer = setInterval(()=>{
                    this.opacity -= 0.01;
                    if(this.opacity <= 0) this.opacity = 1;
                }, 50)
            },
            // 页面和数据还没有保持同步，生成新的虚拟dom和旧的$el中的dom进行比较，最终完成更新
            beforeUpdate() {
                
            },
            // 数据和页面保持同步
            updated () {
                
            },
            //  此时 vm中所有 data、methods 、指令等 都处于可用状态， 可以处理一些善后工作(关闭操作:取下定时等)
            beforeDestroy() {
                console.log('vm嘎了')
                clearInterval(this.timer)
            },
            // 销毁
            destroyed() {
                
            },
        })
    </script>

</body>

</html>